<template>
  <div class="userInfo">
    <el-avatar
      style="width: 200px; height: 200px; margin: 0 auto"
      shape="square"
    >
      <img
        src="https://chst.vip/avatar/headimgurl-1657603631095.webp"
        alt=""
        style="height: 200px; width: 200px; margin: 0 auto"
      />
    </el-avatar>
    <el-descriptions :column="2" border title="我的中心">
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item label="unid">YrIhfb500011</el-descriptions-item>
      <el-descriptions-item label="账号">admin </el-descriptions-item>
      <el-descriptions-item label="vip等级">{{ 3 }}</el-descriptions-item>
      <el-descriptions-item label="vip到期时间">
        <el-tag type="danger" effect="dark">"已过期"</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="昵称">
        <el-tag type="success" effect="dark">123132</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">1231231 </el-descriptions-item>
      <el-descriptions-item label="角色名称"> 23131 </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-tag size="small">"男" </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="省份">
        userInfo.province
      </el-descriptions-item>
      <el-descriptions-item label="城市">userInfo.city</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      defAvatarUrl: "https://chst.vip/avatar/headimgurl-1657603631095.webp",
    };
  },
  meta: {
    title: "wdzx",
    name: "我的中心",
    icon: "iconfont icon-wode",
  },
};
</script>
<style lang='less' scoped>
.userInfo {
  height: 512px;
  display: flex;
  flex-direction: column;
}
.student-profill {
  /deep/.el-descriptions__title {
    line-height: 40px !important;
  }
}
</style>